import React, { useState } from "react";
import { Space, Table, Tag, Button, Modal, Form, Input } from "antd";
import { useLocation } from "react-router-dom";

function SysList() {
  const location = useLocation();
  const role = location.state?.role || "logger";
  const [isModalOpen, setIsModalOpen] = useState(false); //添加
  const [isModalOpen2, setIsModalOpen2] = useState(false); //查看
  // const [isModalOpen3, setIsModalOpen3] = useState(false); //删除

  const [dataSource, setDataSource] = useState([
    {
      key: "1",
      name: "系统用户管理1",
      age: 32,
      address: "New York No. 1 Lake Park",
      tags: ["nice", "developer"],
    },
    {
      key: "2",
      name: "系统用户管理2",
      age: 42,
      address: "London No. 1 Lake Park",
      tags: ["loser"],
    },
    {
      key: "3",
      name: "系统用户管理3",
      age: 32,
      address: "Sydney No. 1 Lake Park",
      tags: ["cool", "teacher"],
    },
  ]);

  const [form] = Form.useForm();

  const columns = [
    {
      title: "用户名",
      dataIndex: "name",
      key: "name",
      render: (text) => <a>{text}</a>,
    },
    {
      title: "权限",
      dataIndex: "age",
      key: "age",
    },
    {
      title: "角色",
      dataIndex: "address",
      key: "address",
    },
    {
      title: "标签",
      key: "tags",
      dataIndex: "tags",
      render: (_, { tags }) => (
        <>
          {tags.map((tag) => {
            let color = tag.length > 5 ? "geekblue" : "green";
            if (tag === "loser") {
              color = "volcano";
            }
            return (
              <Tag color={color} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <Button type="link" onClick={show}>
            查看
          </Button>
          {role === "admin" && (
            <Button type="link" onClick={() => del(record.key)}>
              {/* 这里括号中的record就是获取行内数据的关键字，record.key就是指当前行的key值 */}
              删除
            </Button>
          )}
        </Space>
      ),
    },
  ];

  // 添加对话框
  const showModal = () => {
    setIsModalOpen(true);
  };

  // 确认添加
  const handleOk = () => {
    form.validateFields().then((values) => {
      const newData = {
        key: (dataSource.length + 1).toString(),
        ...values,
        tags: values.tags.split(",").map((tag) => tag.trim()),
      };
      setDataSource([...dataSource, newData]);
      setIsModalOpen(false);
      form.resetFields();
    });
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  // 删除
  const del = (key) => {
    setDataSource(dataSource.filter((item) => item.key !== key));
  };

  // 查看
  const show = () => {
    setIsModalOpen2(true);
  };
  const handleOk2 = () => {
    setIsModalOpen2(false);
  };
  const handleCancel2 = () => {
    setIsModalOpen2(false);
  };

  return (
    <>
      {role === "admin" && (
        <Button
          type="primary"
          size="small"
          style={{ marginBottom: "21px" }}
          onClick={showModal}
        >
          添加用户
        </Button>
      )}
      <Modal
        title="添加用户"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form form={form} layout="vertical" name="form_in_modal">
          <Form.Item
            name="name"
            label="用户名"
            rules={[{ required: true, message: "请输入用户名" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="age"
            label="权限"
            rules={[{ required: true, message: "请输入权限" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="address"
            label="角色"
            rules={[{ required: true, message: "请输入角色" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="tags"
            label="标签"
            rules={[{ required: true, message: "请输入标签" }]}
          >
            <Input placeholder="多个标签用逗号分隔" />
          </Form.Item>
        </Form>
      </Modal>
      <Modal
        title="查看信息"
        open={isModalOpen2}
        onOk={handleOk2}
        onCancel={handleCancel2}
      >
        <p>123</p>
        <p>123</p>
        <p>123</p>
      </Modal>
      <Table columns={columns} dataSource={dataSource} />
    </>
  );
}

export default SysList;
